<template>
    <div class="flex-main">
        <div class="flex-top">
            <menu-tabs :menutab='menutab' @setMenutab='setMenutab'></menu-tabs>
        </div>
        
        <div class="flex-body">
            <no-data v-if="(appointList.length<1 && !loading)"></no-data>
            <div class="p1">
                <my-appointment-item 
                v-for="(item,index) in appointList" :key="index" 
                class="mb" :appointInfo="item"
                @cancelAppoint="cancelAppoint"></my-appointment-item>
            </div>
            
        </div>
    </div>
</template>
<script>
import {appointmentOrder} from '@/api/mine';
export default {
    name:'',
    data () {
        return {
            menutab:['全部预约','未服务','已服务'],
            type:0,
            appointList:[],
            loading:true,
        }
    },
    components: {
        menuTabs:()=>import('@/components/menuTabs'),
        myAppointmentItem:()=>import('@/model/mine/myAppointmentItem'),
    },
    methods: {
        // 取消预约事件
        cancelAppoint(id) {
            let appointList = this.appointList;
            for (const key in appointList) {
                if (appointList.hasOwnProperty(key)) {
                    if(appointList[key].ID==id){
                        appointList.splice(key,1);
                        this.appointList = appointList;
                        break;
                    }
                }
            }
        },
        // tab选择
        setMenutab(index) {
            this.type = index;
            this.getAppointmentOrder();
        },
        // 获取我的预约列表
        getAppointmentOrder() {
            this.$indicator.open('加载中...');
            this.loading = true;
            appointmentOrder({
                customerid:this.$utils.uid,
                type:this.type
            }).then((result) => {
                this.appointList = result.list || [];
                this.$indicator.close();
                this.loading = false;
            }).catch((err) => {
                this.$indicator.close();
            });
        }
    },
    mounted() {
        
        this.getAppointmentOrder();
    }
}
</script>
<style lang="less" scoped scr="@/less/mine/myAppointment.less"></style>
